<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html, body {
        width: calc(100%);
        height: calc(100%);
    }

    h1 {
        font-size: 30px;
        color: red;
        font-weight: bold;
        height: 60px;
    }

    div.send_form {
        margin: auto;
        text-align: center;
    }

    .send_form form {
        width: 100%;
        height: 100%;
    }

    .send_form form div {
        width: 100%;
        line-height: 60px;
        margin-bottom: 15px;
    }

    .send_form form div label {
        display: inline-block;
        width: 80px;
        height: 40px;
        padding: 5px;
        text-align: center;
    }

    .send_form form div input {
        height: 40px;
    }

    .send_form form div button {
        width: 60px;
        height: 40px;
    }
</style>
<body>
<h1 align='center'>这是登录页面
</h1>
<div class="send_form">
    <form method="post">
         {% csrf_token %}
        <div>
            <label>用户名</label>
            <input type="text" name="name">
        </div>
        <div>
            <label>密码</label>
            <input type="password" name="password">
        </div>
        <div>
            <button type="submit">登录</button>
            <button type="reset">重置</button>
        </div>
    </form>
    <div style="color: red;width: 60%;height: 60px;margin: auto;" class="message">
        {% if message %}
            {{ message }}
        {% endif %}
    </div>
</div>
</body>
</html>
